<template>
  <el-form
    ref="formRef"
    inline
    :model="formDataObj"
    :rules="rules"
    :show-message="false"
  >
    <!-- 容器定位层 -->
    <div class="vip_filing_dialog_container">
      <!-- 遮罩层 -->
      <div class="coverLayer"></div>
      <!-- 内容层 -->
      <div class="content_layer">
        <!-- 新建区域 -->
        <div class="new_information">
          <span>{{ title }}资料</span>
          <i class="el-icon-close" @click="closeIconClick"></i>
        </div>
        <!-- body层 -->
        <!-- 表格在这里 -->

        <div class="body_container">
          <!-- 是否显示会员 -->
          <div class="member">
            <span>是否会员</span>
            <el-switch
              v-model="swithSelectValue"
              active-color="#017AFF"
              inactive-color="#dcdfe6"
              :disabled="title === '编辑'"
              @change="handleSwithSelectChange"
            >
            </el-switch>
            <!-- 卡别 -->
            <div class="card_class" v-if="swithSelectValue">
              <span>卡别</span>
              <el-select
                v-model="memberPullSelectValue"
                placeholder="请选择"
                @change="memberPullSelectChange"
              >
                <!-- :disabled="title === '编辑'" -->
                <el-option
                  v-for="item in memberPullSelectValueList"
                  :key="item.id"
                  :label="item.cardName"
                  :value="item.cardNo"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 选择框区域，选择flex布局 -->
          <div class="select_container">
            <div class="info">
              <!-- <span>客户编号</span>
              <el-input v-model="customerIdInputValue" disabled></el-input> -->

              <!-- 这里有一个表单项 -->
              <el-form-item prop="vipCardNumberInputValue">
                <template v-slot:label>
                  <span>VIP卡号</span>
                </template>
                <el-input
                  :disabled="title === '编辑'"
                  v-model.number="formDataObj.vipCardNumberInputValue"
                  placeholder="请输入手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item prop="clientForShortInputValue">
                <template v-slot:label>
                  <span>客户简称</span>
                </template>
                <!-- <span>客户简称</span> -->
                <el-input
                  v-model="formDataObj.clientForShortInputValue"
                ></el-input>
              </el-form-item>
              <el-form-item prop="DiscountNumberInputValue">
                <template v-slot:label>
                  <span>折数</span>
                </template>
                <!-- <span>折数</span> -->
                <el-input
                  :disabled="isForbidDiscountInput"
                  v-model.number="formDataObj.DiscountNumberInputValue"
                  type="number"
                  class="no_margin_right"
                  @change="disNumberInputValueChange"
                ></el-input>
              </el-form-item>
              <!-- 手机号码 -->
              <el-form-item prop="mobileNumberInputValue">
                <template v-slot:label>
                  <span>手机号码</span>
                </template>
                <el-input
                  v-model.number="formDataObj.mobileNumberInputValue"
                  type="number"
                  class="no_margin_right"
                  @change="mobileNumberInputValueChange"
                ></el-input>
              </el-form-item>
              <span style="margin-left: 15px">所属地区</span>
              <el-select
                v-model="toTheAreaPullSelectValue"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in toTheAreaPullSelectValueList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </div>
            <div class="info">
              <!-- <span>所属地区</span>
              <el-select
                v-model="toTheAreaPullSelectValue"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in toTheAreaPullSelectValueList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select> -->
              <span style="margin-left: 20px">营业员</span>
              <el-select v-model="tradeAssistantPullSelectValue" clearable>
                <el-option
                  v-for="item in tradeAssistantPullSelectValueList"
                  :key="item.id"
                  :label="item.personnelName"
                  :value="item.personnelNo"
                >
                </el-option>
              </el-select>
              <span style="margin-left: 35px">介绍人</span>
              <el-input
                v-model="introducerInputValue"
                placeholder="请输入介绍人卡号"
              ></el-input>
              <span style="margin-left: 21px">生日</span>
              <el-date-picker
                v-model="birthdayPullSelectValue"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <!-- <el-select
                v-model="birthdayPullSelectValue"
                clearable
                class="no_margin_right"
              >
                <el-option
                  v-for="item in monthPullSelectValueList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
              <span style="margin-left: 36px">积分</span>
              <el-input
                v-model.number="pointsInputValue"
                :disabled="isForbiddenJiFenInput"
              ></el-input>
              <span style="margin-left: 5px">喜欢颜色</span>
              <el-input v-model="likeColorInputValue"></el-input>
            </div>
            <div class="info">
              <!-- <span style="margin-left: 31px;">积分</span>
              <el-input v-model.number="pointsInputValue"></el-input> -->

              <span style="margin-left: 5px">合适尺码</span>
              <el-input v-model="suitableSizeInputValue"></el-input>
              <span style="margin-left: 50px">备注</span>
              <el-input
                v-model="commentsInputValue"
                class="no_margin_right bei_zhu"
              ></el-input>
              <span style="margin-left: 53px">地址</span>
              <el-input
                v-model="addressInputValue"
                class="address_input bei_zhu"
              ></el-input>
            </div>
            <div class="info big_input">
              <span style="margin-left: 38px" v-if="title !== '编辑'"
                >密码</span
              >
              <!-- 密码默认是123456 -->
              <el-input
                v-if="title !== '编辑'"
                class="password"
                v-model="passwordInputValue"
                placeholder="请输入充值/支付密码"
                type="password"
              ></el-input>
              <span v-if="title !== '编辑'" style="margin-left: 18px"
                >确认密码</span
              >
              <el-input
                v-if="title !== '编辑'"
                v-model="confirmPasswordInputvalue"
                placeholder="请再次输入密码"
                class="no_margin_right comfire_password"
                type="password"
              ></el-input>
            </div>
          </div>
          <!-- 表格区域 -->
          <div class="table_container">
            <el-table
              :data="VipFilingTableData"
              style="width: 100%"
              :header-cell-style="{
                background: '#f4f4f4',
                padding: 0,
                height: '40px'
              }"
            >
              <el-table-column type="index" label="序号" width="50px">
              </el-table-column>
              <el-table-column
                prop="phone"
                label="VIP"
                width="120px"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="cardNo" label="卡别"> </el-table-column>
              <el-table-column prop="discount" label="折数"> </el-table-column>
              <el-table-column prop="integralNumber" label="积分">
              </el-table-column>

              <el-table-column prop="birthdayMonth" label="生日">
              </el-table-column>

              <el-table-column prop="personnelName" label="营业员">
              </el-table-column>
              <el-table-column prop="addressArea" label="所属地区">
              </el-table-column>
              <el-table-column prop="introducer" label="介绍人">
              </el-table-column>
              <el-table-column prop="addressDetail" label="地址">
              </el-table-column>
              <el-table-column prop="remark" label="备注"> </el-table-column>
            </el-table>
          </div>
          <!-- 按钮区域 -->
          <div class="btn_container">
            <el-button @click="closeIconClick">取消</el-button>
            <el-button
              type="primary"
              plain
              @click="handleKeepBtnClick"
              v-if="!isShowContinueBtn"
              >保存</el-button
            >
            <el-button
              type="primary"
              v-if="isShowContinueBtn"
              @click="handleContinueEnteringBtnClick"
              >继续录入</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script>
//  地区的里面的市引入
import { provincea } from '../../../../../config/address.js'
// 接口的引入
import {
  get_trade_assistant_dataApi,
  add_vip_customer_dataApi,
  editStatus_clickKeep_dataApi,
  get_cardType_data_api
} from '../../../../../request/store/store_baseInfo_request.js'
export default {
  name: 'VipFilinfDialog',
  props: {
    // 对话框的标题，是点击新建还是双击单元格的呢？父组件必须传过来
    title: {
      type: String,
      required: true
    },
    // 生日的选择数组，从父组件直接接过来
    monthPullSelectValueList: {
      type: Array,
      default() {
        return []
      }
    },
    // 父组件点击表格双击的时候，传过来对应行的数据
    tableRowData: {
      type: [Object, String],
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 当前选中的营业员名字
      currentAssistObj: {},
      // false代表不禁用， true代表禁用
      disabled: false,
      // 控制积分是否被禁用, true是禁用
      isForbiddenJiFenInput: false,
      // 控制‘继续录入’按钮是否显示
      isShowContinueBtn: true,
      // 点击的是 ‘保存’
      isClick: '不是点击保存按钮',
      // 表格的数据
      VipFilingTableData: [],
      // 是否显示卡别下拉框isShowCardClass和swithSelectValue初始值要一样
      // isShowCardClass: true,
      // 是否禁用折数输入框
      isForbidDiscountInput: true,
      // swith开关选择的值
      swithSelectValue: true,
      // 卡别下拉框选中的值和数组
      memberPullSelectValue: '',
      // memberPullSelectValueList: [
      //   { value: '铂金', label: '铂金' },
      //   { value: '金卡', label: '金卡' }
      // ],
      memberPullSelectValueList: [],
      // 客户编号输入的值
      customerId: '',
      // 表单的数据对象
      formDataObj: {
        // vip卡号输入的值
        vipCardNumberInputValue: '',
        // 客户简称输入的值
        clientForShortInputValue: '',
        // 打折数输入的值
        DiscountNumberInputValue: '',
        // 手机号码
        mobileNumberInputValue: ''
      },
      // 客户编号输入的值
      customerIdInputValue: '',

      // 所属地区的选中的值和数组
      toTheAreaPullSelectValue: '',
      toTheAreaPullSelectValueList: provincea,
      // 营业员下拉选中的值和数组
      tradeAssistantPullSelectValue: '',
      tradeAssistantPullSelectValueList: [],
      // 介绍人输入的值
      introducerInputValue: '',
      // 生日下拉选中的值和数组(父组件传过来)
      birthdayPullSelectValue: '',
      // 积分输入的值
      pointsInputValue: '',
      // 喜好的颜色输入的值
      likeColorInputValue: '',
      // 合适尺码输入的值
      suitableSizeInputValue: '',
      // 备注输入的值
      commentsInputValue: '',
      // 地址详情输入的值
      addressInputValue: '',
      // 密码输入的值
      passwordInputValue: 123456,
      // 确认密码输入的值
      confirmPasswordInputvalue: 123456,
      // 这里是表单的验证规则
      rules: {
        //vip卡号的验证规则
        vipCardNumberInputValue: [
          { required: true, message: '请输入vip卡号', trigger: 'change' }
        ],
        // 客户简称的验证规则
        clientForShortInputValue: [
          { required: true, message: '请输入客户简称', trigger: 'change' }
        ],
        // 打折数的验证规则
        DiscountNumberInputValue: [
          { required: true, message: '请输入折数', trigger: 'change' }
        ], // 手机号码的验证规则
        mobileNumberInputValue: [
          { required: true, message: '请输入手机号码', trigger: 'change' }
        ]
      }
    }
  },

  created() {
    this.get_cardType_data()
    // 获取所有营业员的数据
    this.get_trade_assistant_dataApi()
    // 在DOM渲染完成之后，就应该判断，是否用父组件传过来的数据，还是用自己的
    this.$nextTick(async () => {
      if (
        this.title === '编辑'
        // 用父组件的数据
      ) {
        // 先禁用'积分'输入框
        this.isForbiddenJiFenInput = true
        // 如果是编辑的时候，选判断这个人是否是会员, 0: 不是会员; 1：是会员
        if (this.tableRowData.type === 0) {
          // 不是会员，那么就应该，隐藏卡别下拉框，并且是否为会员的swith变成应该为false
          // this.isShowCardClass = false
          // this.swithSelectValue = false
          this.swithSelectValue = false
          // 不是会员，不能修改成会员，要禁用这个swith按钮，true是禁用
          this.disabled = true
        }
        // 不执行if语句，证明是会员，那么先显示swith为true(默认就是true了)，然后拿到值，填充到下拉框
        // 如果是编辑的话，先隐藏‘继续录入按钮’
        this.isShowContinueBtn = false
        this.memberPullSelectValue = this.tableRowData.cardNo
        // ---------用父组件传过来的数据---------
        /*      1. 通过卡别找到，卡别的对象，
                2. 判断卡别的对象里面的折数和卡别是否都可以编辑 
                3 .重新发起请求，拿卡别的数据
         */
        // 点击编辑的时候，显示慢了一点，是因为这里发起请求拿数据
        const { data: res } = await get_cardType_data_api()
        console.log(res, 'get_cardType_data')
        if (res.code !== 200) return
        this.memberPullSelectValueList = res.data
        //
        // console.log(this.tableRowData)
        const editCurrentCard = this.memberPullSelectValueList.find((item) => {
          return this.tableRowData.cardName === item.cardName
        })
        // console.log('editCurrentCard', editCurrentCard.a)
        // 按需是否可以编辑折数  // editCurrentCard这个有的话，证明是会员，在判断这个会员是否可以编辑折数，如果不是会员直接返回false,那么散客就可以编辑会员，下面的不变，改填充的填充
        this.isForbidDiscountInput =
          editCurrentCard && editCurrentCard.isEdit === 0 ? true : false
        // console.log(this.tableRowData);
        console.log(this.isForbidDiscountInput)
        // 父组件传过来，填充表单的三个数据
        this.formDataObj.vipCardNumberInputValue = this.tableRowData.phone
        this.formDataObj.clientForShortInputValue = this.tableRowData.name
        this.formDataObj.DiscountNumberInputValue = this.tableRowData.discount
        this.formDataObj.mobileNumberInputValue =
          this.tableRowData.cellPhoneNumber
        // 单个填充
        this.toTheAreaPullSelectValue = this.tableRowData.addressArea
        this.tradeAssistantPullSelectValue = this.tableRowData.personnelNo
        this.toTheAreaPullSelectValue = this.tableRowData.addressArea
        this.introducerInputValue = this.tableRowData.introducer

        this.birthdayPullSelectValue = this.tableRowData.birthdayMonth

        // this.birthdayPullSelectValue = this.tableRowData.birthdayMonth

        this.pointsInputValue = this.tableRowData.integralNumber

        this.likeColorInputValue = this.tableRowData.likeColor

        this.suitableSizeInputValue = this.tableRowData.suitableSize

        this.commentsInputValue = this.tableRowData.remark
        this.addressInputValue = this.tableRowData.addressDetail
        this.passwordInputValue = this.tableRowData.password
        this.confirmPasswordInputvalue = this.tableRowData.affirmPassword
        // ---------用父组件传过来的数据结束---------
      }
    })
  },
  methods: {
    /* 手机号码输入的值发生改变的时候，触发的函数 */
    mobileNumberInputValueChange() {},
    // 折数输入的值发生改变的时候，触发的函数
    disNumberInputValueChange(val) {
      // console.log(val)
      if (val <= 0) {
        this.$message.warning('折数只能在 1- 10 之间,最小值是 1')
        this.formDataObj.DiscountNumberInputValue = 1
      }
      if (val > 10) {
        this.$message.warning('折数只能在 1- 10 之间,最大值是 10')
        this.formDataObj.DiscountNumberInputValue = 10
      }
    },
    // 获取卡别的数据
    async get_cardType_data() {
      const { data: res } = await get_cardType_data_api()
      console.log(res, 'get_cardType_data')
      if (res.code != 200) return
      this.memberPullSelectValueList = res.data
    },
    // 获取所以营业员的数据
    async get_trade_assistant_dataApi() {
      const paramsObj = {
        directSaleNo: this.$store.state.currentStoreData.no
      }
      const { data: res } = await get_trade_assistant_dataApi(paramsObj)
      console.log(res, '获取所以营业员的数据')
      if (res.code !== 200) return
      this.tradeAssistantPullSelectValueList = res.data
      // 如果返回来的数据没有，直接return
      // if (!res || res.code !== 200 || res.data.length < 1) return
      // // 遍历返回来的数组，拼接成下拉框要的数组,是常用类型数据，不能改变原来数组,所以，只能遍历一个，就往tradeAssistantPullSelectValueList拼接一个
      // res.data.forEach((item) => {
      //   this.tradeAssistantPullSelectValueList.push({
      //     label: item
      //   })
      // })
      // console.log(this.tradeAssistantPullSelectValueList);
    },

    // 卡别下拉选择的值发生改变的时候，触发的函数
    memberPullSelectChange(currentSelectValue) {
      console.log(currentSelectValue)
      const currentSelect = this.memberPullSelectValueList.find((item) => {
        return item.cardNo === currentSelectValue
      })
      console.log('currentSelect', currentSelect)
      this.formDataObj.DiscountNumberInputValue = currentSelect.discount
      // 1 是可以编辑 0是不可以编辑
      this.isForbidDiscountInput = currentSelect.isEdit === 1 ? false : true
    },
    // 点击关闭图标和取消按钮的时候，触发的函数
    closeIconClick() {
      this.$emit('closeDialog')
    },
    /*
         点击继续录入的时候，触发的函数
    */
    handleContinueEnteringBtnClick() {
      // 新建的时候，如果是会员的话，那么卡别就必填的
      if (this.swithSelectValue) {
        if (this.memberPullSelectValue === '') {
          return this.$message.warning('会员的情况下，请选择卡别')
        }
      }
      // 通过在调用表单验证
      // 调用表单的验证方法，看是否验证通过或者拿到错误对象
      this.$refs.formRef.validate(async (boolean, obj) => {
        if (!boolean) {
          // 如果验证不通过，弹出错误信息给用户知道
          if (Object.keys(obj).length > 0) {
            this.$message({
              type: 'warning',
              // 里面有数据没有填的话，总是提示第一个就行,Object.keys(obj)[0]代表第一个属性键，因为obj的值是一个数组，所以直接取第一个项
              message: obj[Object.keys(obj)[0]][0].message
            })
          }
          // 验证不通过，直接return，不再执行下面代码
          return
        }
        // 验证通过的时候，可以发起ajax请求
        // 这个是点击新建的时候，后端需要的参数对象
        const paramsObj = {
          // 是否是会员也要自己传过情，否则后端默认都是会员1
          type: this.swithSelectValue && this.memberPullSelectValue ? 1 : 0,
          // 不知道这个是用啥字段，先用cardNo,判断是否隐藏再决定取值
          // cardNo:
          //   this.swithSelectValue && this.memberPullSelectValue
          //     ? this.memberPullSelectValue
          //     : '', // 卡别编号
          cardNo: this.swithSelectValue ? this.memberPullSelectValue : '',
          phone: this.formDataObj.vipCardNumberInputValue, // 手机号码（vip卡号）
          name: this.formDataObj.clientForShortInputValue, // 客户简称
          discount: this.formDataObj.DiscountNumberInputValue, // 折数
          cellPhoneNumber: this.formDataObj.mobileNumberInputValue,
          addressArea: this.toTheAreaPullSelectValue, // 地址区域（所属地区）
          personnelNo: this.tradeAssistantPullSelectValue, // 职员编号(营业员)
          introducer: this.introducerInputValue, // 介绍人（VIP会员）
          birthdayYearMonth: this.birthdayPullSelectValue, // 生日（月）
          integralNumber: this.pointsInputValue, // 积分
          likeColor: this.likeColorInputValue, // 喜好的颜色
          suitableSize: this.suitableSizeInputValue, // 适合尺码
          remark: this.commentsInputValue, // 备注
          addressDetail: this.addressInputValue, // 地址详情（地址）
          password: this.passwordInputValue, // 密码
          affirmPassword: this.confirmPasswordInputvalue // 确认密码
        }
        console.log(paramsObj)
        // 判断输入的两次密码是否相等,不等直接return
        // 如果是编辑的时候，不用密码校验
        if (this.title !== '编辑') {
          if (this.passwordInputValue !== this.confirmPasswordInputvalue) {
            return this.$message.warning('两次输入的密码不一致！')
          }
        }

        // 选中营业员的话，那么通过营业员编号，找到那个营业员名字
        if (this.tradeAssistantPullSelectValue) {
          this.currentAssistObj = this.tradeAssistantPullSelectValueList.find(
            (item) => {
              return item.personnelNo === this.tradeAssistantPullSelectValue
            }
          )
          // console.log(this.currentAssistName, 'this.currentAssistName')
        }

        // 可以在这里发起ajax请求
        // console.log("成功发送请求");
        // 如果点击的是保存，那么发起ajax请求成功之后，应该要关闭对话框
        const { data: res } = await add_vip_customer_dataApi(paramsObj)
        console.log(res)
        // 发起数据失败，直接return
        if (res.code !== 200) return

        // 创建成功之后，再拼接表格数据,输入一个，收集拼接一个
        this.VipFilingTableData.push({
          phone: paramsObj.phone,
          cardNo: paramsObj.cardNo,
          discount: paramsObj.discount,
          integralNumber: paramsObj.integralNumber,
          birthdayMonth: paramsObj.birthdayMonth,
          personnelName: this.currentAssistObj.personnelName,
          addressArea: paramsObj.addressArea,
          introducer: paramsObj.introducer,
          addressDetail: paramsObj.addressDetail,
          remark: paramsObj.remark
        })

        // 如果点击的是保存，执行玩下面代码就可以结束,直接return
        this.$emit('tableDataIsHaveData')
        if (this.isClick === '点击保存按钮') {
          // 关闭对话框之后，直接return
          this.$message.success('保存成功')
          this.closeIconClick()
          return
        }
        /*
            如果点击的是保存，代码执行到这来，就可以结束,直接return
        */
        // 重置这个表单，并且清空验证结果
        this.$refs.formRef.resetFields()
        // 这些不在表单项里面，需要手动清除
        //  ----------------------------
        this.toTheAreaPullSelectValue = '' // 地址区域（所属地区）
        this.tradeAssistantPullSelectValue = '' // 职员编号(营业员)
        this.introducerInputValue = '' // 介绍人（VIP会员）
        this.birthdayPullSelectValue = '' // 生日（月）
        this.pointsInputValue = '' // 积分
        this.likeColorInputValue = '' // 喜好的颜色
        this.suitableSizeInputValue = '' // 适合尺码
        this.commentsInputValue = '' // 备注
        this.addressInputValue = '' // 地址详情（地址）
        this.passwordInputValue = '' // 密码
        this.confirmPasswordInputvalue = '' // 确认密码
        // ------------------
      })
    },
    /*
         swith开关改变的时候，触发的函数
     */
    handleSwithSelectChange(boolean) {
      // 不是会员默认折数10，而不能修改
      if (!boolean) {
        this.isForbidDiscountInput = true
        this.formDataObj.DiscountNumberInputValue = 10
      } else {
        // this.isForbidDiscountInput = true
        this.formDataObj.DiscountNumberInputValue = ''
        // 卡别清空
        this.memberPullSelectValue = ''
        // this.isForbidDiscountInput = false
      }
    },
    /*
        点击了保存的按钮
    */
    async handleKeepBtnClick() {
      // 如果title === '编辑' 的话，那么证明不是新建数据，而且修改数据
      if (this.title === '编辑') {
        // console.log(this.title);
        // 一样要验证必填的表单和两次密码填写要正确
        this.$refs.formRef.validate(async (boolean, obj) => {
          if (!boolean) {
            // 如果验证不通过，弹出错误信息给用户知道
            if (Object.keys(obj).length > 0) {
              this.$message({
                type: 'warning',
                // 里面有数据没有填的话，总是提示第一个就行,Object.keys(obj)[0]代表第一个属性键，因为obj的值是一个数组，所以直接取第一个项
                message: obj[Object.keys(obj)[0]][0].message
              })
              return
            }
            // --------------------------
          }
          // 验证通过的话，走这里
          // --------------------------

          // 全部验证通过
          // 这里发起修改数据的ajax
          // 修改数据需要的参数,后端要求这个参数必须全部传
          const editParamsObj = {
            cellPhoneNumber: this.formDataObj.mobileNumberInputValue,
            // 是否是会员也要自己传过情，否则后端默认都是会员1
            type: this.tableRowData.type, // 类型（0散客 1会员）
            // 不知道这个是用啥字段，先用cardNo,判断是否隐藏再决定取值
            cardNo: this.swithSelectValue ? this.memberPullSelectValue : '', // 卡别编号 （什么数字代表铂金？代表黄金？）
            phone: this.formDataObj.vipCardNumberInputValue, // 手机号码（vip卡号）
            name: this.formDataObj.clientForShortInputValue, // 客户简称
            discount: this.formDataObj.DiscountNumberInputValue, // 折数
            addressArea: this.toTheAreaPullSelectValue, // 地址区域（所属地区）
            personnelNo: this.tradeAssistantPullSelectValue, // 职员编号(营业员)
            introducer: this.introducerInputValue, // 介绍人（VIP会员）
            birthdayMonth: this.birthdayPullSelectValue, // 生日（月）
            integralNumber: this.pointsInputValue, // 积分
            likeColor: this.likeColorInputValue, // 喜好的颜色
            suitableSize: this.suitableSizeInputValue, // 适合尺码
            remark: this.commentsInputValue, // 备注
            addressDetail: this.addressInputValue, // 地址详情（地址）
            password: this.passwordInputValue, // 密码
            affirmPassword: this.confirmPasswordInputvalue, // 确认密码
            id: this.tableRowData.id, // 要修改这一行的id
            sockVersions: this.tableRowData.sockVersions, // 乐观锁
            balance: this.tableRowData.balance, // 余额
            birthdayYearMonth: this.tableRowData.birthdayYearMonth, // 生日（年月）
            consumeMoney: this.tableRowData.consumeMoney, // 消费金额
            createTime: this.tableRowData.createTime, // 创建时间
            directSaleNo: this.tableRowData.directSaleNo, // 直营店编号
            lastRechargeBalance: this.tableRowData.lastRechargeBalance, // 末次充值余额
            lastSellBalance: this.tableRowData.lastSellBalance, // 末次消费余额
            recharge: this.tableRowData.recharge, // 充值
            sendMoney: this.tableRowData.sendMoney, //赠送金额（赠送金额直接加入余额）
            sex: this.tableRowData.sex, //性别（0男 1女）
            softwareCustomerId: this.tableRowData.softwareCustomerId, // 软件客户ID
            status: this.tableRowData.status, // 状态(0正常1禁用)
            updateTime: this.tableRowData.updateTime // 修改时间
          }
          // console.log(editParamsObj);
          // 发起ajax请求，修改数据的接口
          // 判断输入的两次密码是否相等,不等直接return
          if (this.title !== '编辑') {
            if (this.passwordInputValue !== this.confirmPasswordInputvalue) {
              return this.$message.warning('两次输入的密码不一致！')
            }
          }

          // 都通过了，那么就发起Ajax请求保存
          const { data: res } = await editStatus_clickKeep_dataApi(
            editParamsObj
          )
          console.log(res)
          // 如果保存成功，那么就马上关闭对话框
          if (res.code === 200) {
            // 保存成功之后，马上更新列表，就是再调用一次原来填充数据的方法（点击查询，触发的函数）或者直接刷新页面也行
            this.$emit('upDataPageDataFatherComponentsData')
            // 提示用户准备保存成功
            this.$message.success('保存成功')
            // 调用关闭对话框的方法
            this.closeIconClick()
          }
          // 然后不管是否成功，最后都要return，之后下面代码不再执行
          // return;
        })

        return // 这个return是，直接退出handleKeepBtnClick这个大函数
      }
      // 如果是编辑状态下，执行完上面代码已经return
      /*
      不是编辑的状态下，点击保存按钮的时候，走的是下面的代码
      */
      this.isClick = '点击保存按钮'
      // 再一次调用继续录入的方法
      console.log('我是这里')
      this.handleContinueEnteringBtnClick()
    }
  }
}
</script>

<style lang="less" scoped>
.vip_filing_dialog_container {
  // 这个是备注框的宽度
  .bei_zhu {
    width: 400px !important;
  }
  // 确认密码框的样式
  .comfire_password {
    width: 149px !important;
  }
  // 必须要固定定位，根据浏览器进行定位(父级只用作占满全屏给遮罩层定位)
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  // 统一为这个页面的select框设置下拉框的样式
  .el-select {
    width: 160px;
    height: 32px;
    /deep/.el-input {
      height: 100%;
      .el-input__inner {
        height: 100%;
      }
    }
    /deep/.el-input__icon {
      line-height: unset;
    }
  }
  // 统一为输入框设置样式
  .el-input {
    width: 160px;
    height: 32px;
    /deep/.el-input__inner {
      height: 100%;
    }
  }
  // 统一设置input框和select框的右边距离
  .el-input,
  .el-select {
    margin-right: 20px;
  }

  // 真正的遮罩层
  .coverLayer {
    position: absolute;
    background-color: #000;
    // 这里可以直接用父元素的100%的高度和宽度
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0.3;
  }
  // 内容层
  .content_layer {
    position: absolute;
    background-color: #fff !important;
    width: 1340px;
    max-height: 700px; // 当内容自适应高度达到700px的时候，就会出现滚动条
    left: 50%;
    top: 18%;
    z-index: 10;
    transform: translate(-50%);
    overflow: auto;
    // 新建区域
    .new_information {
      width: 100%;
      height: 48px;
      background-color: #f8f8f8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      font-size: 16px;
      color: #222222;
      font-weight: bold;
    }
    // body层
    .body_container {
      padding: 16px 24px 24px 23px;
      // 是否显示会员
      .member {
        display: flex;
        align-items: center;
        // 不给高度就是自适应，那么显示和隐藏就会出现抖动
        height: 32px;
        span {
          margin-right: 6px;
        }
        .el-switch {
          margin-right: 30px;
        }
      }
    }
    // 选择框区域，选择flex布局
    .select_container {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16px;
      .info {
        margin-bottom: 8px;
        span {
          margin-right: 7px;
        }
      }
    }
  }

  // 去掉最右边的框的边距
  .no_margin_right {
    margin-right: 0;
  }
  // 地址框的样式
  .big_input {
    .address_input {
      width: 437px;
      margin-right: 0;
    }
  }
  .password {
    font-size: 13px;
  }
}
// 下面是表格的容器和样式
.table_container {
  margin-top: 16px;
}
// 按钮区域
.btn_container {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
// 加了表单验证项之后，必须要修改的样式
/deep/.el-form-item {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: unset;
  .el-form-item__label {
    width: unset !important;
    padding: 0;
    span {
      font-size: 16px;
    }
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
